<template>
  <view class="content">
    <u-navbar :is-back="false" title="客户"
      title-size="30"
      :background="{background:'#2B88FE' }"
      title-color="#fff">
      <div class="head_icon">
        <u-icon @click="$api.handleBackTo"
          name="arrow-left" color="#fff"
          size="36">
        </u-icon>
        <u-icon @click="$api.handleHomeTo"
          name="home" color="#fff" size="36">
        </u-icon>
      </div>
    </u-navbar>
    <u-sticky style="height: 110upx;"
      bg-color="#fff">
      <view class="client-head">
        <view class="lf el-flex">
          <!-- <u-icon @click.native="clearAreaMarket"
            size="30" name="reload">
          </u-icon> -->
          <div class="boxFlex"
            @click="areaShow=!areaShow">
            <span
              class="title">{{areaText}}</span>
            <u-icon name="arrow-right"
              color="#999">
            </u-icon>
          </div>
          <div class="areaDialog" v-if="areaShow">
            <view class="area-list">
              <view class="li"
                v-for="(item,index) in Areavalue"
                :key="index">
                <view class="cell"
                  @click="allShow(index)">
                  全部</view>
                <view
                  @click="setArea(index,v.fId)"
                  :class="{'active':v.fId===formActive[index]}"
                  class="cell"
                  v-for="(v,i) in item" :key="i">
                  {{v.fNm}}({{v.fMc}})
                </view>
              </view>
            </view>
            <u-button type="primary"
              @click="areaConfirm">确定
            </u-button>
          </div>
          <!-- <picker mode="multiSelector"
            v-model="areaShow"
            @columnchange="ChangeArea"
            :range="Areavalue"
            @change="bindAreaMarket">
            <div class="boxFlex">
              <span
                class="title">{{areaText}}</span>
              <u-icon name="arrow-right"
                color="#999">
              </u-icon>
            </div>
          </picker> -->
        </view>
        <u-search v-model="form.Key"
          @change="changeSearch">
        </u-search>
      </view>
    </u-sticky>
  
	<order-item v-for="(item,index) in clist"
      :key="index" :li="item"
      @clickMsg="clickMsg">
      <template slot="footer">
        <view class="order-footer">
          <navigator class="order-button"
		    :class="{'red':item.fProCount==0}"
            :url="`/pages/my_customer/my_customer_stock?id=${item.fId}`">
            产品
          </navigator>
          <navigator class="order-button"
            :url="`/pages/sale/addvisitrecord?fId=${item.fId}&taskId=0`">
            拜访
          </navigator>
          <navigator class="order-button"
		    :class="{'red':item.fWillDayCount}"
            :url="`/pages/sale/productstobepurchased?fId=${item.fId}`">
            下单
          </navigator>

          <navigator class="order-button"
            :class="{'red':item.fWillMoney}"
            :url="`/pages/my_customer/PayWill?id=${item.fId}`">
            账单
          </navigator>
		  <navigator class="order-button"
		    :class="{'red':item.fCheckOne==0}"
		    :url="`/pages/my_customer/PayWill?id=${item.fId}`">
		    纸质
		  </navigator>
		  <navigator class="order-button"
		    :class="{'red':item.fCheckTwo==0}"
		    :url="`/pages/my_customer/PayWill?id=${item.fId}`">
		    电子
		  </navigator>
          <navigator class="order-button"
            :class="{'red':item.fSaleCount}"
            :url="`/pages/my_customer/SaleList?id=${item.fId}`">
            促销
          </navigator>
          <navigator class="order-button"
            :url="`/pages/customer/editdetail?fId=${item.fId}`">
            编辑
          </navigator>
      <navigator class="order-button"
	      :class="{'red':item.fSumType==0}"
            :url="`/pages/my_customer/MrkSumSetDetail?id=${item.fId}`">
            {{item.fSumName}}
          </navigator>
        </view>
      </template>
    </order-item>
    <u-empty text="暂无数据" mode="list"
      v-if="!clist.length">
    </u-empty>
  </view>
</template>

<script>
import orderItem from '@/components/order-item'
export default {
  components: {
    orderItem
  },
  data() {
    return {
      formActive: {
        0: '',
        1: '',
        2: ''
      },
      fClassId: '',
      areaText: '全部',
      Areavalue: [],
      AreavalueData: [],
      areaShow: false,
      types: [],
      className: '所属分类',
      show: false,
      keyword: '',
      img: this.urlimg + 'mini/',
      list: [
        {
          text: '客户资料'
        },
        {
          text: '商家总数据'
        },
        {
          text: '商家订单'
        }
      ],
      form: {
        Key: '',
        ClassId: 0,
        AreaClassId: 0
      },
      isAllList: true,
      keywords: '',
      clist: [],
      isAllList: 1,
      page: 1,
      status: 'loading',
      loading: true,
      pages: {
        PageSize: 10,
        PageIndex: 1,
        value: this.form
      },
      li: ''
    }
  },
  onLoad(e) {
    uni.setNavigationBarTitle({
      title: '我的客户'
    })
    this.$axios('api/BusClassArea/GetSClassList', 'post', { value: 0 }).then(res => {
      let info = res.Value[0]
      this.Areavalue = this.getarea(res.Value, info.fId)
      this.AreavalueData = this.getParentNodes(res.Value)
      setTimeout(() => {
        this.setArea(0, info.fId)
        // let form = this.AreavalueData.flat().find(x => x.fClassId === this.fClassId)
        // this.areaText = form.fClassName
        // this.form.ClassAreaId = form.fClassId
      }, 100)
    })
  },
  onShareAppMessage() {},
  onShow() {
    this.defaultData(() => {
      this.getList()
    })
  },
  onReachBottom() {
    if (!this.isAllList) return
    this.pages.PageIndex += 1
    this.getList()
  },
  methods: {
    handleOpen() {
      console.log(this.$refs.uDropdown)
    },
    allShow(idx) {
      if (idx === 0) {
        this.clearAreaMarket()
      } else {
        this.fClassId = this.formActive[idx - 1]
        this.areaConfirm()
      }
    },
    areaConfirm() {
      const info = this.getIdData(this.fClassId)
      this.areaText = info.fNm
      this.form.AreaClassId = info.fId
      this.defaultData(() => {
        // this.$refs.uDropdown.close()
        this.areaShow = false
        this.getList()
      })
    },
    getParentNodes(list) {
      let max = Math.max.apply(
        this,
        list.map(x => x.fL)
      )
      let arr = []
      for (let index = 1; index <= max; index++) {
        arr.push(list.filter(x => x.fL == index))
      }
      return arr
    },
    getarea(list) {
      let arr = this.getParentNodes(list)
        // .map(x => x.map(x => x.fClassName))
        .filter(x => x.length)
      // arr.forEach((v, i) => {
      //   if (i > 0) v = []
      // })
      return arr
    },
    getParentId(id) {
      return this.AreavalueData.flat().filter(x => x.fPId == id)
    },
    getIdData(id) {
      // let { column, value } = e.detail
      // let c = this.Areavalue[column][value]
      const arr = this.AreavalueData.flat()
      let info = arr.find(x => x.fId === id)
      return info
    },
    getNameData(name) {
      // let { column, value } = e.detail
      // let c = this.Areavalue[column][value]
      const arr = this.AreavalueData.flat()
      let info = arr.find(x => x.fNm === name)
      return info
    },
    setArea(column, fClassId) {
      let col = column + 1
      let child = this.getParentId(fClassId)
      this.fClassId = fClassId
      this.formActive[column] = fClassId
      if (child.length) {
        this.$set(this.Areavalue, col, child)
        this.setArea(col, child[0].fId)
      } else {
        this.Areavalue = this.Areavalue.slice(0, col)
      }
    },
    ChangeArea(e) {
      let info = this.getinfo(e)
      this.setArea(e.detail.column, info.fId)
    },
    clearAreaMarket() {
      this.areaText = '请选择超市区域'
      this.form.AreaClassId = 0
      this.defaultData(() => {
        // this.$refs.uDropdown.close()
        this.areaShow = false
        this.getList()
      })
    },
    bindAreaMarket(e) {
      let s = e.detail.value.map((x, i) => this.Areavalue[i][x]).pop()
      let info = this.AreavalueData.flat().find(x => x.fNm === s)
      this.areaText = info.fNm
      this.form.AreaClassId = info.fId
      this.defaultData(() => {
        this.getList()
      })
    },
    classChange(e) {
      this.className = this.types.find(x => x.value === e).label
      this.form.AreaClassId = e
      this.getList()
    },

    changeSearch() {
      var that = this
      this.defaultData(function () {
        that.getList()
      })
    },

    gotoPage(url) {
      this.$api.navigator(url)
    },
    clickMsg(e) {
      uni.navigateTo({
        url: '/pages/my_customer/my_customer_client?id=' + e.fId + '&taskId=0'
      })
    },
    onSheet(e) {
      switch (e) {
        case 0:
          uni.navigateTo({
            url: 'my_customer_detail?id=' + this.li.id
          })
          break
        case 1:
          uni.navigateTo({
            url: 'my_customer_total?id=' + this.li.id
          })
          break
        case 2:
          uni.navigateTo({
            url: '../sale/order_customer?id=' + this.li.id
          })
          break
      }
    },
    defaultData(callback) {
      this.isAllList = true
      this.pages.PageIndex = 1
      this.clist = []
      callback && callback()
    },
    goHome() {
      uni.switchTab({
        url: '/pages/tools/tools'
      })
    },
    getList() {
      let that = this
      this.$axios('api/MrkBasic/MrkListPaged', 'post', {
        value: this.form,
        PageIndex: this.pages.PageIndex,
        PageSize: 10
      }).then(res => {
        if (!res.Value.List.length) this.isAllList = false
        that.loading = false
        that.clist.push(...res.Value.List)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.client-head {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 15rpx;
  background: #fff;
  z-index: 11;

  .lf {
    font-size: 24rpx;
    margin-right: 15rpx;

    .title {
      margin: 0 10rpx;
    }
  }
  u-search {
    width: 65vw;
  }
}

// ::v-deep .u-dropdown__menu__item {
//   justify-content: flex-start !important;
// }
// ::v-deep .u-dropdown > .u-dropdown__content {
//   display: none;
// }


.areaDialog {
  position: absolute;
  left: 0;
  top: 190rpx;
  width: 100%;
  z-index: 9;
}
.area-list {
  display: flex;
  background-color: #fff;
  .li {
    padding: 10rpx;
    height: 80vh;
    overflow: auto;
    flex-grow: 1;
    .cell {
      padding: 10rpx;
    }
    // .cell:hover {
    //   background-color: #eee;
    // }
  }
  .li:not(:first-child) {
    border-left: 1px solid #eee;
  }
  .active {
    background-color: #eee;
    color: #169bd5;
  }

  .cred {
    background-color: #ff0000;
    color: #fef0f0;
  }
}
</style>
